<template>
  <div>
    <el-form ref="form" :model="form" label-width="150px">
      <div class="formBox">
        <div class="headBox">
          <p>分佣设置</p>
        </div>
        <el-popover
          placement="top"
          width="295"
          trigger="hover"
          >
            <span class="headH1">业绩归属</span><br>
            <span class="headText">最多只能两个角色获利</span><br>
            <span class="headH1" style="margin-top:8px;display: inline-block;">计算方式</span><br>
            <span class="headText">商品佣金=实收金额×佣金比率</span>
            <i slot="reference" class="el-icon-question"></i>
        </el-popover>
        <el-form-item label="业绩归属：">
<!--          <el-radio-group v-model="form.resource">-->
            <el-checkbox v-model="form.shareCommission"  name="type">商户获利</el-checkbox>
            <el-checkbox v-model="form.shareCommission"  name="type">分享客获利</el-checkbox>
            <el-checkbox   v-model="form.inviteCommission" name="type">邀请人获利</el-checkbox>
<!--          </el-radio-group>-->
        </el-form-item>
               <el-form-item label="分佣比率：">
          <el-radio-group v-model="form.commissionNode">
            <el-radio :label="1">订单完成关闭</el-radio>
            <el-radio :label="2">订单完成关闭+ <el-input v-model="form.days" class="inpSty"  placeholder="大于0的正整数"></el-input> 天</el-radio>
            <el-radio :label="3">固定分账时间</el-radio>
          </el-radio-group>
          <div v-if="form.commissionNode == '3'" class="fixedAccount">
            <p>固定分账时间：每月</p>
            <el-input class="inpSty" v-model="form.days"  placeholder=""></el-input>
            <p>号统一分账上月实际到账金额</p>
            <span class="tips">（不要选择25号至次月5号）</span>
          </div>
        </el-form-item>

        <el-form-item label="普通用户是否获利：">
          <el-radio-group v-model="form.ordinaryCommission">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div  class="fixedAccount" v-if="form.ordinaryCommission == 1">
            <el-input class="inpSty"  placeholder="0" v-model="form.ordinaryRatio" ></el-input>
            <p>% 下级下单后才获利</p>
          </div>
        </el-form-item>

        <el-form-item label="商户结算方式：">
          <el-radio-group v-model="form.ordinaryComm">
            <el-radio :label="1">系统自动</el-radio>
            <el-radio :label="0">商户申请</el-radio>
          </el-radio-group>
          <div  class="fixedAccount" v-if="form.ordinaryComm == 1">
            <el-input class="inpSty"  placeholder="0" v-model="form.ordinaryRa" ></el-input>
            <p>% 下级下单后才获利</p>
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <div class="gddw" style="display: flex;align-items: center;justify-content: center;">
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name:"commissionSet",
    data() {
      return {
        form: {

        },
        tableData: [],
      }
    },
    props:{
      param:{}
    },
    watch:{
      param(val){
        val.shareCommission =val.shareCommission ==1?true:false
        val.inviteCommission =val.inviteCommission==1?true:false
        this.form= val
      }

    },
    methods: {
      onSubmit() {
        this.form.shareCommission =this.form.shareCommission?1:0
        this.form.inviteCommission =this.form.inviteCommission?1:0
        this.$emit('onSubmit',this.form)
      }
    }
  }
</script>
<style scoped lang="scss">
  .formBox{
    padding: 30px 0;
    position: relative;
    .headBox{
      display: flex;
      align-items: flex-end;
      margin-bottom: 15px;

      p{
        font-size: 16px;
        padding: 0;
        margin: 0;
        margin-right: 5px;
      }
      span{
        font-size: 12px;
        color: #666666;
      }
    }
    .inpSty{
      width: 150px;
    }
    .fixedAccount{
      display: flex;
      align-items: center;
      .tips{
        font-size: 12px ;
        color: #666666;
      }
    }
  }
 .el-icon-question{
    color: #67b1ff;
    font-size: 18px;
    position: absolute;
    left: 40px;
    top: 76px;
  }
  .gddw{
    height: 85px;
    line-height: 85px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 210px;
    z-index: 1;
    right: 0;
    background: #ffffff;
    box-shadow: 0px -6px 10px 0px rgba(0,0,0,0.03);
}
.headH1{
  color: #606266;
  font-size: 12px;
  font-weight: 400;
}
.headText{
  color: #999999;
  font-size: 12px;
  font-weight: 400;
}
</style>
